<template>
  <view>
    <view class="special-report" v-if="stop === 1">
      <view class="report-head">请选择一项违规内容</view>
      <view class="report-nav">
        <view class="report-list" v-for="item,index in reportList" :key="index" @click="goReport(item)">
          <view>{{item.name}}</view>
          <u-icon name="arrow-right" size="28rpx" color="#909090"></u-icon>
        </view>
      </view>
    </view>
    <view class="special-report" v-else>
      <view class="report-textarea">
        <view class="report-title">举报内容
          <view style="color:#FF5353 ;">*</view>
        </view>
        <u--textarea v-model="textareaValue" placeholder="请简单描述提供的内容与服务。" height="330rpx"></u--textarea>
        <view class="report-upload">
          <u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1" multiple uploadIcon="plus"
            :maxCount="10"></u-upload>
        </view>
        <u-button text="提交" color="#2F7EFC" style="height: 94rpx;" @click="onComit"></u-button>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        reportList: [{
            name: '专栏冒用/占用昵称',
            type: '1'
          },
          {
            name: '内容与宣传不符',
            type: '2'
          },
          {
            name: '涉及敏感信息发布',
            type: '3'
          },
          {
            name: '侵权(涉及版权，名誉及肖像权问题)',
            type: '4'
          },
          {
            name: '传播不实信息',
            type: '5'
          },
          {
            name: '其他',
            type: '6'
          }
        ],
        stop: 1,
        textareaValue: '',
        fileList: []
      }
    },
    methods: {
      goReport(item) {
        this.stop = 2
      },
      onComit() {
        if (!this.textareaValue) {
          uni.showToast({
            title: '必须填写举报内容',
            icon: 'none'
          })
        } else {

          uni.redirectTo({
            url: '/pages/specialColumnPage/userPage/report-info'
          })
        }
      },


      // 删除图片
      deletePic(event) {
        this.fileList.splice(event.index, 1)
      },
      // 新增图片
      async afterRead(event) {
        console.log(event, 11111);
        // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
        let lists = [].concat(event.file)
        console.log(lists, 22222);
        let fileListLen = this.fileList.length
        lists.map((item) => {
          this.fileList.push({
            ...item,
            status: 'uploading',
            message: '上传中'
          })
        })
        console.log(lists, 33333);
        for (let i = 0; i < lists.length; i++) {
          const result = await this.uploadFilePromise(lists[i].url)
          console.log(result, 44444);
          let item = this.fileList[fileListLen]
          this.fileList.splice(fileListLen, 1, Object.assign(item, {
            status: 'success',
            message: '',
            url: result
          }))
          fileListLen++
        }
      },
      uploadFilePromise(url) {
        return new Promise((resolve, reject) => {
          let a = uni.uploadFile({
            url: 'https://taichi.chintanneng.com/maximobiz/api/maximo/app/fileUpload', //todo 更换上传图片接口地址，上传参数
            filePath: url,
            name: 'file',
            formData: {
              user: 'test'
            },
            success: (res) => {
              setTimeout(() => {
                resolve(res.data.data)
              }, 1000)
            }
          });
        })
      },
    }
  }
</script>

<style lang="less" scoped>
  /deep/ .u-textarea {
    background-color: #F5F5F5 !important;
    margin-top: 20rpx;
  }
  /deep/ .u-button__text{
    font-size: 36rpx !important;
  }
  .special-report {
    box-sizing: border-box;
    padding-top: 30rpx;
  }

  .report-head {
    width: 750rpx;
    height: 86rpx;
    background: rgba(255, 255, 255);
    box-shadow: 0rpx 2rpx 20rpx rgba(161, 161, 161, 0.16);
    font-size: 32rpx;
    font-weight: 500;
    line-height: 86rpx;
    color: #909090;
    box-sizing: border-box;
    padding-left: 40rpx;
  }

  .report-nav {
    width: 750rpx;
    background: rgba(255, 255, 255);
    box-shadow: 0rpx 2rpx 20rpx rgba(161, 161, 161, 0.16);
    margin-top: 20rpx;
    box-sizing: border-box;
    padding: 0 40rpx;

    .report-list {
      height: 110rpx;
      font-size: 36rpx;
      font-weight: 500;
      color: #313131;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1rpx solid #eee;
    }
  }

  .report-textarea {
    width: 100%;
    background-color: #fff;
    padding: 22rpx 32rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;

    .report-title {
      font-size: 32rpx;
      font-weight: 500;
      color: #909090;
      display: flex;
    }

    .report-upload {
      margin: 30rpx 0;
    }
  }
</style>